<template>
  <div>
    <div class="login__content">
      <div
        class="close__btn"
        @click="handleClose"
      >
        <svg-icon
          icon-class="close"
          class="close-icon"
          :size="24"
        />
      </div>
      <div class="login__aside">
        <div class="logo__btn flex-center">
          <svg-icon :icon-class="appCfg.logo" :size="26" />
          <span class="fs22 font-dingtalk color-white ml10">{{ appCfg.name }}</span>
        </div>
        <div class="desc">
          <div class="cont">
            登录可领取体验权益！<svg-icon icon-class="double-arrow" :class="14" />
          </div>
        </div>
        <div class="desc__rights">
          <ul>
            <li v-for="item in RightList" :key="item.label" class="fs14">
              <svg-icon icon-class="round-checked" :size="12" />
              <span>{{ item.label }}</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="login__main">
        <div class="login__type">
          <p
            v-show="ACDialogType === 'phoneLogin'"
            class="type__login type__qrcode"
            @click="handleTypeChange('wxLogin')"
          >
            <svg-icon icon-class="qrcode" class="" />
          </p>
          <p
            v-show="ACDialogType === 'wxLogin'"
            class="type__login type__phone"
            @click="handleTypeChange('phoneLogin')"
          >
            <svg-icon icon-class="phone" color="var(--el-color-primary)" />
          </p>
        </div>
        <component v-if="comType" :is="comType" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, ref, provide, computed, onMounted } from "vue";
import { storeToRefs } from "pinia";
import { systemAppStore } from "@/stores/system";
import { userAppStore } from "@/stores/user";
import { useRoute } from "vue-router";
import gzhLogin from "./gzh-login.vue";
import phoneLogin from "./phone-login.vue";
import register from "./register.vue";
import forgetPwd from "./reset-password.vue";
import { invokeAPi } from "@/xz-fn";
const route = useRoute();
const _systemAppStore_ = systemAppStore();
const _userAppStore_ = userAppStore();
const { appCfg } = storeToRefs(_systemAppStore_);
const { ACDialogType } = storeToRefs(_userAppStore_);
const props = defineProps({
  isPage: Boolean
});
const comType = computed(() => {
  switch (ACDialogType.value) {
    case "wxLogin":
      return gzhLogin;
    case "phoneLogin":
      return phoneLogin;
    case "register":
      return register;
    case "forgetPwd":
      return forgetPwd;
    default:
      return "";
  }
});
const RightList = ref([
  {
    label: "在线翻译：快速翻译，支持多语言"
  },
  {
    label: "划词翻译：选中即翻，精准高效"
  },
  {
    label: "图片翻译：图中文字秒翻译"
  },
  {
    label: "文档翻译：多种格式一键翻译"
  },
  {
    label: "截图翻译：截图直接轻松翻译"
  }
]);
function handleClose(){
  invokeAPi("jsMsg_SetWndStatus", 0, true);
}
function handleTypeChange(type: string) {
  _userAppStore_.setACDialogType(type);
}
onMounted(() => {
  if (props.isPage) {
    const { loginType } = route.query;
    _userAppStore_.login(loginType);

    invokeAPi("xz_page_load_finished", "XZDesktopLogin");
  }
});
</script>

<style lang="scss">
.login__content {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  position: relative;
}
.close__btn{
  position: absolute;
  top: -20px;
  right: -42px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: #00000080;
  color: #fff;
  transition: backgorund-color .3s linear;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  &:hover{
    opacity: .8;
  }
}
.login__aside {
  flex: 1 1 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  background: url(@/assets/images/login-bg.png) no-repeat center top / 100% auto;
  border-radius: 8px 0 0 8px;
  .logo {
    // font-size: 162px;
  }
  .desc {
    margin-top: 30px;
    border-radius: 58px;
    color: var(--el-color-white);
    padding: 1px;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(131, 47, 255, .5);
    background: rgba(131,47,255,0.3);
    // background: linear-gradient(123deg, rgba(var(--el-color-primary-rgb), .1), rgba(var(--el-color-regular-rgb), .2));
    // &::before {
    //   aspect-ratio: 1px;
    //   content: "";
    //   position: absolute;
    //   inset: 0;
    //   padding: 1px;
    //   border-radius: 40px;
    //   background: linear-gradient(123deg, rgba(var(--el-color-primary-rgb), 1), rgba(var(--el-color-regular-rgb), 1));
    //   -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    //   -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    //   mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
    //   -webkit-mask-composite: xor;
    //   -webkit-mask-composite: exclude;
    //   mask-composite: exclude;
    // }
    .cont {
      font-size: 14px;
      font-weight: bold;
      padding: 6px 16px;
      line-height: 22px;
    }
  }
  .desc__rights {
    ul {
      padding-top: 4px;
    }
    li {
      margin-top: 16px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      gap: 6px;
      font-size: 12px;
    }
  }
}
.login__main {
  flex: 1 1 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20px 0;
  background-color: var(--el-color-white);
  border-radius: 10px;
  position: relative;
}
.login__type {
  position: absolute;
  top: 0;
  right: 0;
  width: 60px;
  height: 60px;
  cursor: pointer;
  overflow: hidden;
  .svg-icon {
    position: absolute;
    // top: 50%;
    // left: 50%;
    font-size: 36px;
    // transform: translate(-50%, -50%);
    top: 8px;
    right: 8px;
  }
}
.type__login {
  width: 100%;
  height: 100%;
  &::before {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-width: 30px;
    border-style: solid;
    border-top-right-radius: 10px;
  }
  &::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 0;
    border-width: 30px;
    border-style: solid;
    border-top-right-radius: 10px;
    border-color: transparent transparent var(--el-color-white)
      var(--el-color-white);
  }
}
.type__qrcode {
  color: var(--el-color-primary);
  &::before {
    border-color: #f0f0f0 #f0f0f0 transparent transparent;
  }
}
.type__phone {
  &::before {
    border-color: var(--el-color-primary) var(--el-color-primary) transparent
      transparent;
  }
}
</style>
